<template>
  <div>
    <el-card class="box-card">
      <el-table
        :data="dictList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        lazy
        :load="clickRowHD"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称" >
        </el-table-column>
        <el-table-column prop="dictCode" label="编码" width="200">
        </el-table-column>
        <el-table-column prop="value" label="值" width="200"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { reqDictListHD } from "@/api/dict";
export default {
  name: "Dict",
  data() {
    return {
      dictList: [],
      // list:[],
      id: 0,
    };
  },
  mounted() {
    // 初始化数据
    this.getDictListHD();
  },
 
  methods: {
    // 1.获取字典数据
    async getDictListHD() {
      try {
        const res = await reqDictListHD();
        this.dictList = res.data;
        
      } catch (error) {}
    },
    // 2.点击事件获取下一层数据
    async clickRowHD(tree, treeNode, resolve) {
      // console.log("tree", tree);
      // console.log("treeNode", treeNode);
      // console.log("resolve", resolve);
      try {
        const res = await reqDictListHD(tree.id);
        // console.log(res);
        this.$nextTick(() => {
          resolve(res.data);
        });
      } catch (error) {}
    },
  },
 
};
</script>

<style scoped>
.box-card {
  padding: 20px;
}
</style>
